<template>
	<view>
		<view class="keyboard-head">
			<view class="title h3">
				请输入验证码
			</view>
			<view class="title p">
				验证码已发送至 <text>{{replacePhone}}</text>
				<view class="count-down">
					<wh-captcha
					  ref="captcha" 
					  class="click-active"
					  :secord="secordTime"
					  title="重新获取"
					  waitTitle="SECORDs"
					  normalClass="captcha-normal"
					  disabledClass="captcha-disabled"
					  @click="getCaptcha"
					></wh-captcha>
				</view>
			</view>
			
			
			<view class="input-row" @tap.stop="showKeyboard">
				<view :class="['item',{'item-active':codeLength == index}]" v-for="(k,index) in arr" :key="index">
					{{ code.charAt(index)?'*':'' }}
				</view>
			</view>
			
			<view class="code">
				<DigitalKeyboard 
					ref="DigitalKeyboard" 
					@change="contToggle" 
					:keyBoardSwitch="keyBoardSwitch" 
					:decimalPoint="true">
				</DigitalKeyboard>
			</view>
		</view>
	</view>
</template>

<script>
	import whCaptcha from '@/components/wh-captcha/wh-captcha.vue';
	import DigitalKeyboard from '@/components/digital-keyboard/keyboard.vue'
	export default {
		components: {
			whCaptcha,
			DigitalKeyboard
		},
		data() {
			return {
				code: '',
				secordTime: 60,
				urlQuery: null,
				phoneNo: '',
				keyBoardSwitch: true,
				codeLength: null,
				arr: ['','','',''],
			}
		},
		computed: {
			replacePhone() {
				return this.phoneNo.replace(/^(.{3})(.*)(.{4})$/, '$1 $2 $3')
			}
		},
		onReady() {
			 this.countDown()
		},
		onShow() {

		},
		onLoad(opts) {
			this.urlQuery = opts;
			this.phoneNo = opts.phoneNo;
		},
		methods: {
			// 倒计时
			getCaptcha() {

			},
			showKeyboard(){
				this.codeLength = this.code.length == 4?3:this.code.length;
				this.keyBoardSwitch = true;
			},
			countDown() {
				if (this.$refs.captcha.canSend()) this.$refs.captcha.begin()
			},
			contToggle(k){
				let len = this.code.length;
				if(k === ''){
					this.code = this.code.substring(0, len - 1);
					this.codeLength = this.code.length;
					return;
				}
				this.codeLength = len+1;
				this.code += k.toString();
				if(this.length === len+1){
					this.keyBoardSwitch = false;
					return;
				}
				if(this.codeLength == 4){
					this.closeKeyboard();
				}
			},
			// 输完之后
			closeKeyboard(value){
				uni.navigateBack({
					delta: 3
				})
			},
		}
	}
</script>

<style lang="scss">
	.keyboard-head{
		padding-left: 30rpx;
		margin-top: 60rpx;
		margin-bottom: 50rpx;
		.h3{
			font-size: 50rpx;
			color: #333;
			font-weight: bold;
			text-align: left;
		}
		.p{
			text-align: left;
			font-size: ($font-size-base);
			color: #999;
		}
	}
	.count-down{
		float: right;
		color: #333;
	}
	.input-row{
		width: 690rpx;
		margin: 0 auto;
		padding: 30rpx 0;
		padding-top: 60rpx;
		box-sizing: border-box;
		font-size: 24px;
		text-align: center;
		.item{
			float: left;
			width: 100rpx;
			height: 100rpx;
			line-height: 100rpx;
			margin:0 36rpx;
			background: #fff;
			box-sizing: border-box;
			border-radius: 14rpx;
			font-weight: bold;
		}
		.item-active{
			position: relative;
			border: 2px solid ($cor);
			transform: scale(1.1);
			--webkit-transform: scale(1.1);
		}
	}
</style>
